<template>
  <ul class="checkbox">
    <li 
      class="checkbox_item" 
      :class="[
        item.checked ? 'checkbox_active' : ''
      ]" 
      v-for="(item, index) in data"
      @click="changeSelected(data, index, item, item.checked)">
      {{item.name}}
    </li>
  </ul>
</template>

<script>
export default {
  name: "GzhbCheckbox",
  props:{
    data:{
      type: Array,
      default(){
        return []
      }
    },
    isSingle:{
      type: Boolean,
      default: false
    }
  },
  methods: {
    changeSelected(data, index, item, status){
      // 如果开启单选，则重置其他属性
      if(this.isSingle){
        data.forEach( i=>{
          i.checked = false
        })
      }

      item.checked = !status
      this.$set(data, index, item)
      this.$emit('change', this.data, item)
    }
  }
}
</script>

<style lang="less" scoped>
.checkbox{
  .checkbox_item{
    display: inline-block;
    padding: 0.05rem 0.13rem;
    background-color: #f7f7f7;
    border-radius: 0.15rem;
    margin-top: 0.1rem;
    margin-right: 0.1rem;
    &:nth-child(1){
      margin-left: none;
    }
  }
  .checkbox_active{
    color: #0089f1;
    background-color: #def1ff;
  }
}
</style>